{% extends 'base.html' %}
{% block head_block %}
    <title>第二个页面布局</title>
    <script src="./static/js/jquery-1.11.1.min.js"></script>
    <script src="./static/js/echarts.min.js"></script>
    <script src="./static/js/echarts-wordcloud.min.js"></script>
    <script src="./static/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="static/js/3d_jswordcloud.js"></script>
    <link href="./static/css/style_wordcloud.css" rel="stylesheet">
    <link href="./static/css/style_thir_page.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #root {
            display: flex;
            height: 100vh;
            width: 100vw;
            padding-top: 5%;
            padding-bottom: 2%;
            box-sizing: border-box;
        }

        #main_block {
            box-sizing: border-box;
            /* border: solid 1px #000000; */
            display: flex;
            width: 100%;
            /* 主轴水平排列 */
            flex-direction: row;
            /* 主轴水平平均分布 */
            justify-content: space-evenly;
            /* 交叉轴纵向拉伸：不行，否则标签滚动条就加不上了 */
            /* align-items: stretch; */
        }

        #main_block * {
            box-sizing: border-box;
            flex-shrink: 1;
            height: 95%;
        }

        #left_block,
        #right_block {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        #left_block :first-child {
            height: 65%;
        }

        #left_block :last-child {
            height: 30%;
        }

        #left_block > *,
        #right_block > * {
            width: 100%;
            flex-shrink: 1;
            border: solid 1px rgba(84, 215, 255, 0.89);
            padding: 5px;
            background-color: #031a39;
        }

        #right_block {
            justify-content: space-between;
            border: solid 1px rgba(84, 215, 255, 0.89);
        }

        #right_block * {
            border: 0;
        }

        #right_block_d * {
            background-color: #193a7d;
            border: solid 1px rgba(255, 255, 255, 0.89);
            margin-top: 10px;
        }

        #div1 {
            position: relative;
            width: 600px;
            height: 600px;
            margin: 20px auto 0;
            border-radius: 10px;
            border: 0px solid #ccc !important
        }

        #div1 a {
            position: absolute;
            top: 0px;
            left: 0px;
            font-family: Microsoft YaHei;
            color: #1c3d5e;
            font-weight: bold;
            text-decoration: none;
            padding: 3px 6px;
        }

        #div1 a:hover {
            opacity: 1 !important;
        }

        #wordcloud-container {
            width: 80%;
            /* 设置容器的宽度 */
            height: 90%;
            /* 设置容器的高度 */
            background-color: transparent;
            /* 设置容器的背景颜色为透明 */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #wordcloud-container1 {
            width: 75%;
            /* 设置容器的宽度 */
            height: 90%;
            /* 设置容器的高度 */
            background-color: transparent;
            /* 设置容器的背景颜色为透明 */
            float: left;
            /* 将容器向左浮动 */
        }

        /*
        #wordcloud-container1>* {
            border: solid 1px #f9fafc;
        } */

        .dropdown {
            position: relative;
            /*left: 40%;  水平居中 */
            /*transform: translateX(-50%);  向左平移自身宽度的一半，实现水平居中 */
            display: inline-block;
            /* 保持内联块元素的样式 */
        }

        .button-container {
            flex-wrap: nowrap;
        }

        .dropdown-btn {
            background-color: transparent;
            color: #fdfdfd;
            border: none;
            cursor: pointer;
            display: inline-block;
            /* 保持内联块元素的样式 */
            padding: 10px;
            box-sizing: border-box;
        }

        .dropdown-btn-width {
            width: 100%;
        }

        .dropdown-content {
            /*position: absolute;
                top: 100%;
                left: 0;*/
            position: relative;
            background-color: transparent;
            color: #fdfdfd;
            display: none;
            max-height: 200px;
            height: 100px;
            overflow-y: auto;
        }

        .dropdown-content.show {
            display: block;
        }

        .dropdown-content button {
            display: block;
            width: 100%;
            /* padding: 10px 20px; */
            /* border: solid 1px #fdfdfd; */
            background-color: transparent;
            text-align: left;
            color: #fdfdfd;
            height: 100px;
            z-index: 200;
        }

        .dropdown-content button:hover {
            box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.5);
        }

        /* .button {
            display: inline;
            height: 38px;
            color: #fdfdfd;
        } */

        .pagination-horizontal {
            display: flex;
            flex-direction: row;
            list-style: none;
            padding: 0;
        }

        .pagination-horizontal li {
            margin-right: 5px;
        }
    </style>
{% endblock head_block %}

{% block body_block %}
    <div id="root">
        <div id="main_block">
            <div id="left_block" style="width: 45%">
                <div id="left_block_u">
                    <div
                            style="height:30px;width: 100%;border: 0;color: #f9fafc;background: linear-gradient(to right, #3053a4 30%, #0d224e 70%); text-align: left;">
                        词云图
                    </div>
                    <div id="wordcloud-container1">
                        <div id="wordcloud-container" style="width: 100%;height: 85%;"></div>
                        <div class="wordcloud" style="width: 100%">
                            <div id='btns' class=button-container
                                 style="width:100%;display: flex;justify-content: center;">
                                <div style="width:90px;height:12px;font-weight: bold; white-space: nowrap; font-size: 12px">
                                    词云图形状:
                                </div>
                                <div id="dropdown-container" class="dropdown"
                                     style="width:100px;height: 100px; color:#f9fafc"></div>
                                <div style="font-weight: bold; white-space: nowrap; font-size: 12px">自定义形状:</div>
                                <button id="upload-button"
                                        style="border: none;background-color: transparent;cursor: pointer;color:#fdfdfd">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fdfdfd"
                                         class="bi bi-upload" viewBox="0 0 16 16">
                                        <path
                                                d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
                                        <path
                                                d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"/>
                                    </svg>
                                </button>
                                <button id="download-button-map"
                                        style="border: none;background-color: transparent;cursor: pointer;height: 30px;">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="#fdfdfd"
                                         class="bi bi-download" viewBox="0 0 16 16">
                                        <path
                                                d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
                                        <path
                                                d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="boxnav" style="height: 500px;">
                        <div class="table">
                            <table id="wordTable">
                                <thead class="odd-row" style="height: 35px">
                                <tr>
                                    <th style="width: 70px;height: 40px;background-color: #3053a4;margin-top: 2px;">顺序
                                    </th>
                                    <th style="width: 70px;height: 40px;background-color: #3053a4;margin-top: 2px;">词语
                                    </th>
                                    <th style="width: 70px;height: 40px;background-color: #3053a4;margin-top: 2px;">词频
                                    </th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                            <div id="pagination" style="height: 70px;"></div>
                            <button id="download-button-table"
                                    style="border: none;background-color: transparent;cursor: pointer;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="#fdfdfd"
                                     class="bi bi-download" viewBox="0 0 16 16">
                                    <path
                                            d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
                                    <path
                                            d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>

                <div id="left_block_d">
                    <div
                            style="height:30px;width: 100%;border: 0;color: #f9fafc;background: linear-gradient(to right, #3053a4 30%, #0d224e 70%); text-align: left;">
                        意见领袖
                    </div>
                    <div id="left_block_d_c"
                         style="display: flex; flex-direction: row;width: 100%;height: 80%;overflow-x: auto;font-size:10px">
                    </div>
                    <button id="download-button-people"
                            style="border: none;background-color: transparent;cursor: pointer;height: 40px;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="#fdfdfd"
                             class="bi bi-download" viewBox="0 0 16 16">
                            <path
                                    d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
                            <path
                                    d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
                        </svg>
                    </button>
                </div>

            </div>
            <div id="right_block" style="width: 45%">
            </div>
        </div>
    </div>

    <script src="../static/js/my_wordcloud.js"></script>
    <script src="../static/js/table_wordcloud.js"></script>
    <script src="../static/js/topic_time.js"></script>
    <script src="../static/js/yijianlingxiu.js"></script>
{% endblock body_block %}